<template>
  <div class="template-selector">
    <div class="selector-header">
      <h3 class="selector-title">
        <el-icon><Grid /></el-icon>
        选择模板
      </h3>
      <div class="selector-actions">
        <el-button 
          text 
          size="small"
          @click="showCustomTemplate"
        >
          自定义模板
        </el-button>
      </div>
    </div>
    
    <!-- 模板分类 -->
    <div class="template-categories">
      <el-radio-group v-model="selectedCategory" @change="handleCategoryChange">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="social">社交媒体</el-radio-button>
        <el-radio-button label="ecommerce">电商营销</el-radio-button>
        <el-radio-button label="poster">海报宣传</el-radio-button>
        <el-radio-button label="story">故事模板</el-radio-button>
      </el-radio-group>
    </div>
    
    <!-- 模板网格 -->
    <div class="templates-grid">
      <div
        v-for="template in filteredTemplates"
        :key="template.id"
        class="template-item"
        :class="{ 'selected': selectedTemplate?.id === template.id }"
        @click="selectTemplate(template)"
      >
        <div class="template-preview">
          <div 
            class="template-canvas"
            :style="getTemplateStyle(template)"
          >
            <div class="template-layout">
              <!-- 图片区域 -->
              <div 
                class="image-area"
                :style="template.layout.imageArea"
              >
                <el-icon><Picture /></el-icon>
                <span>图片区域</span>
              </div>
              
              <!-- 文字区域 -->
              <div 
                v-for="(textArea, index) in template.layout.textAreas"
                :key="index"
                class="text-area"
                :style="textArea.style"
              >
                <span>{{ textArea.placeholder }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="template-info">
          <div class="template-name">{{ template.name }}</div>
          <div class="template-meta">
            <el-tag :type="getCategoryTagType(template.category)" size="small">
              {{ getCategoryText(template.category) }}
            </el-tag>
            <span class="template-size">{{ template.width }}×{{ template.height }}</span>
          </div>
          <div class="template-description">{{ template.description }}</div>
        </div>
        
        <!-- 选中指示器 -->
        <div class="selection-indicator" v-if="selectedTemplate?.id === template.id">
          <el-icon><Check /></el-icon>
        </div>
      </div>
    </div>
    
    <!-- 自定义模板对话框 -->
    <el-dialog
      v-model="customTemplateVisible"
      title="自定义模板"
      width="500px"
    >
      <el-form :model="customTemplate" label-width="100px">
        <el-form-item label="模板名称">
          <el-input v-model="customTemplate.name" placeholder="输入模板名称" />
        </el-form-item>
        
        <el-form-item label="画布尺寸">
          <div class="size-inputs">
            <el-input-number
              v-model="customTemplate.width"
              :min="100"
              :max="2000"
              placeholder="宽度"
            />
            <span>×</span>
            <el-input-number
              v-model="customTemplate.height"
              :min="100"
              :max="2000"
              placeholder="高度"
            />
          </div>
        </el-form-item>
        
        <el-form-item label="背景颜色">
          <el-color-picker v-model="customTemplate.backgroundColor" />
        </el-form-item>
        
        <el-form-item label="模板类型">
          <el-select v-model="customTemplate.category">
            <el-option label="社交媒体" value="social" />
            <el-option label="电商营销" value="ecommerce" />
            <el-option label="海报宣传" value="poster" />
            <el-option label="故事模板" value="story" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="描述">
          <el-input
            v-model="customTemplate.description"
            type="textarea"
            :rows="3"
            placeholder="输入模板描述"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="customTemplateVisible = false">取消</el-button>
        <el-button type="primary" @click="createCustomTemplate">
          创建模板
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Grid, Picture, Check } from '@element-plus/icons-vue'

// 模板接口定义
interface Template {
  id: string
  name: string
  category: string
  width: number
  height: number
  backgroundColor: string
  description: string
  layout: {
    imageArea: Record<string, string>
    textAreas: Array<{
      placeholder: string
      style: Record<string, string>
    }>
  }
}

interface Props {
  selectedTemplate?: Template
}

interface Emits {
  (e: 'select-template', template: Template): void
  (e: 'create-template', template: Template): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式数据
const selectedCategory = ref('all')
const customTemplateVisible = ref(false)

const customTemplate = reactive({
  name: '',
  width: 800,
  height: 600,
  backgroundColor: '#ffffff',
  category: 'social',
  description: ''
})

// 预定义模板
const templates = ref<Template[]>([
  {
    id: 'social-square-1',
    name: '社交方图 - 简约',
    category: 'social',
    width: 800,
    height: 800,
    backgroundColor: '#f8f9fa',
    description: '适合Instagram、微信朋友圈等社交平台',
    layout: {
      imageArea: {
        position: 'absolute',
        top: '10%',
        left: '10%',
        width: '80%',
        height: '60%',
        borderRadius: '8px'
      },
      textAreas: [
        {
          placeholder: '主标题',
          style: {
            position: 'absolute',
            top: '75%',
            left: '10%',
            width: '80%',
            height: '15%',
            fontSize: '24px',
            fontWeight: 'bold',
            textAlign: 'center'
          }
        }
      ]
    }
  },
  {
    id: 'social-story-1',
    name: '故事模板 - 竖版',
    category: 'story',
    width: 600,
    height: 1000,
    backgroundColor: '#ffffff',
    description: '适合Instagram Story、微信状态等竖版内容',
    layout: {
      imageArea: {
        position: 'absolute',
        top: '20%',
        left: '10%',
        width: '80%',
        height: '50%',
        borderRadius: '12px'
      },
      textAreas: [
        {
          placeholder: '标题文字',
          style: {
            position: 'absolute',
            top: '5%',
            left: '10%',
            width: '80%',
            height: '10%',
            fontSize: '28px',
            fontWeight: 'bold',
            textAlign: 'center'
          }
        },
        {
          placeholder: '描述文字',
          style: {
            position: 'absolute',
            top: '75%',
            left: '10%',
            width: '80%',
            height: '20%',
            fontSize: '16px',
            textAlign: 'center'
          }
        }
      ]
    }
  },
  {
    id: 'ecommerce-banner-1',
    name: '电商横幅 - 促销',
    category: 'ecommerce',
    width: 1200,
    height: 400,
    backgroundColor: '#ff6b6b',
    description: '适合电商平台的促销横幅',
    layout: {
      imageArea: {
        position: 'absolute',
        top: '10%',
        left: '5%',
        width: '40%',
        height: '80%',
        borderRadius: '8px'
      },
      textAreas: [
        {
          placeholder: '促销标题',
          style: {
            position: 'absolute',
            top: '20%',
            left: '50%',
            width: '45%',
            height: '25%',
            fontSize: '32px',
            fontWeight: 'bold',
            color: 'white'
          }
        },
        {
          placeholder: '优惠信息',
          style: {
            position: 'absolute',
            top: '50%',
            left: '50%',
            width: '45%',
            height: '30%',
            fontSize: '18px',
            color: 'white'
          }
        }
      ]
    }
  },
  {
    id: 'poster-vertical-1',
    name: '海报模板 - 活动',
    category: 'poster',
    width: 600,
    height: 900,
    backgroundColor: '#4ecdc4',
    description: '适合活动宣传、产品发布等场景',
    layout: {
      imageArea: {
        position: 'absolute',
        top: '30%',
        left: '10%',
        width: '80%',
        height: '40%',
        borderRadius: '12px'
      },
      textAreas: [
        {
          placeholder: '活动标题',
          style: {
            position: 'absolute',
            top: '10%',
            left: '10%',
            width: '80%',
            height: '15%',
            fontSize: '28px',
            fontWeight: 'bold',
            textAlign: 'center',
            color: 'white'
          }
        },
        {
          placeholder: '活动详情',
          style: {
            position: 'absolute',
            top: '75%',
            left: '10%',
            width: '80%',
            height: '20%',
            fontSize: '16px',
            textAlign: 'center',
            color: 'white'
          }
        }
      ]
    }
  },
  {
    id: 'social-card-1',
    name: '卡片模板 - 引用',
    category: 'social',
    width: 800,
    height: 600,
    backgroundColor: '#667eea',
    description: '适合名言引用、文字分享',
    layout: {
      imageArea: {
        position: 'absolute',
        top: '10%',
        left: '60%',
        width: '35%',
        height: '35%',
        borderRadius: '50%'
      },
      textAreas: [
        {
          placeholder: '引用文字',
          style: {
            position: 'absolute',
            top: '20%',
            left: '10%',
            width: '45%',
            height: '60%',
            fontSize: '20px',
            fontStyle: 'italic',
            color: 'white',
            textAlign: 'left'
          }
        },
        {
          placeholder: '作者署名',
          style: {
            position: 'absolute',
            top: '85%',
            left: '10%',
            width: '80%',
            height: '10%',
            fontSize: '14px',
            color: 'rgba(255,255,255,0.8)',
            textAlign: 'right'
          }
        }
      ]
    }
  },
  {
    id: 'ecommerce-product-1',
    name: '产品展示 - 方图',
    category: 'ecommerce',
    width: 800,
    height: 800,
    backgroundColor: '#ffffff',
    description: '适合产品展示、商品推广',
    layout: {
      imageArea: {
        position: 'absolute',
        top: '15%',
        left: '15%',
        width: '70%',
        height: '50%',
        borderRadius: '8px'
      },
      textAreas: [
        {
          placeholder: '产品名称',
          style: {
            position: 'absolute',
            top: '70%',
            left: '15%',
            width: '70%',
            height: '10%',
            fontSize: '24px',
            fontWeight: 'bold',
            textAlign: 'center'
          }
        },
        {
          placeholder: '价格信息',
          style: {
            position: 'absolute',
            top: '82%',
            left: '15%',
            width: '70%',
            height: '8%',
            fontSize: '20px',
            color: '#ff6b6b',
            fontWeight: 'bold',
            textAlign: 'center'
          }
        }
      ]
    }
  }
])

// 计算属性
const filteredTemplates = computed(() => {
  if (selectedCategory.value === 'all') {
    return templates.value
  }
  return templates.value.filter(template => template.category === selectedCategory.value)
})

// 方法
const selectTemplate = (template: Template) => {
  emit('select-template', template)
}

const handleCategoryChange = () => {
  // 分类变化时的处理
}

const showCustomTemplate = () => {
  customTemplateVisible.value = true
}

const createCustomTemplate = () => {
  if (!customTemplate.name) {
    ElMessage.warning('请输入模板名称')
    return
  }
  
  const newTemplate: Template = {
    id: `custom-${Date.now()}`,
    name: customTemplate.name,
    category: customTemplate.category,
    width: customTemplate.width,
    height: customTemplate.height,
    backgroundColor: customTemplate.backgroundColor,
    description: customTemplate.description,
    layout: {
      imageArea: {
        position: 'absolute',
        top: '20%',
        left: '20%',
        width: '60%',
        height: '50%',
        borderRadius: '8px'
      },
      textAreas: [
        {
          placeholder: '标题文字',
          style: {
            position: 'absolute',
            top: '75%',
            left: '20%',
            width: '60%',
            height: '15%',
            fontSize: '24px',
            fontWeight: 'bold',
            textAlign: 'center'
          }
        }
      ]
    }
  }
  
  templates.value.push(newTemplate)
  emit('create-template', newTemplate)
  customTemplateVisible.value = false
  
  // 重置表单
  Object.assign(customTemplate, {
    name: '',
    width: 800,
    height: 600,
    backgroundColor: '#ffffff',
    category: 'social',
    description: ''
  })
  
  ElMessage.success('自定义模板创建成功')
}

const getTemplateStyle = (template: Template) => {
  return {
    width: '100%',
    height: '100%',
    backgroundColor: template.backgroundColor,
    position: 'relative',
    borderRadius: '8px',
    overflow: 'hidden'
  }
}

const getCategoryTagType = (category: string) => {
  switch (category) {
    case 'social': return 'primary'
    case 'ecommerce': return 'success'
    case 'poster': return 'warning'
    case 'story': return 'info'
    default: return ''
  }
}

const getCategoryText = (category: string) => {
  switch (category) {
    case 'social': return '社交媒体'
    case 'ecommerce': return '电商营销'
    case 'poster': return '海报宣传'
    case 'story': return '故事模板'
    default: return category
  }
}
</script>

<style scoped>
.template-selector {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px;
  color: white;
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.selector-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.template-categories {
  margin-bottom: 20px;
  text-align: center;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.template-item {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.template-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.template-item.selected {
  background: rgba(64, 158, 255, 0.2);
  border: 2px solid #409EFF;
}

.template-preview {
  aspect-ratio: 4/3;
  padding: 15px;
}

.template-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.template-layout {
  width: 100%;
  height: 100%;
  position: relative;
}

.image-area {
  background: rgba(255, 255, 255, 0.2);
  border: 2px dashed rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.text-area {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
}

.template-info {
  padding: 15px;
}

.template-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.template-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.template-size {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.template-description {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.selection-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: #409EFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

/* 自定义模板对话框样式 */
.size-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.size-inputs span {
  color: #666;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .template-selector {
    padding: 15px;
  }
  
  .templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }
  
  .template-categories :deep(.el-radio-group) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
}
</style>